Angular Material এর সাহায্যে একটি রেসপন্সিভ সাইডন্যাভ (Sidenav) তৈরি করা খুবই সহজ এবং এটি একটি জনপ্রিয় উপাদান (component) যা মোবাইল, ট্যাবলেট, এবং ডেস্কটপ ডিভাইসে একটি উন্নত এবং ব্যবহারকারী-বান্ধব লেআউট প্রদান করে। সাইডন্যাভ সাধারণত নেভিগেশন বার হিসেবে ব্যবহৃত হয়, যেখানে ইউজাররা বিভিন্ন পেজ বা সেকশনে সহজে নেভিগেট করতে পারেন।

Angular Material এর MatSidenav কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই একটি রেসপন্সিভ সাইডন্যাভ তৈরি করতে পারেন।

১. প্রথমে প্রয়োজনীয় মডিউল ইমপোর্ট করা

MatSidenavModule এবং MatButtonModule সহ কিছু অন্যান্য Angular Material মডিউল ইনপোর্ট করতে হবে।

১.১. মডিউল ইনপোর্ট করা

import { NgModule } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule
  ],
  ...
})
export class AppModule {}

২. HTML তে সাইডন্যাভ তৈরি করা

এখন, আপনি MatSidenav কম্পোনেন্ট ব্যবহার করে সাইডন্যাভ তৈরি করতে পারবেন। একটি সাইডন্যাভ সাধারণত দুটি অংশে বিভক্ত থাকে: main content এবং sidenav (নেভিগেশন)। সাইডন্যাভ মোবাইল এবং ডেস্কটপ ডিভাইসে বিভিন্ন আকারে প্রদর্শিত হতে পারে।

২.১. স্ট্যাটিক সাইডন্যাভ

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item href="#">Home</a>
      <a mat-list-item href="#">About</a>
      <a mat-list-item href="#">Contact</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
    <h1>Welcome to My Website</h1>
  </mat-sidenav-content>
</mat-sidenav-container>

এখানে:

• mode="side": সাইডন্যাভের স্টাইল নির্ধারণ করে। এটি side বা over হিসেবে হতে পারে। side মানে সাইডন্যাভ ডিফল্টভাবে দৃশ্যমান থাকবে, এবং over মানে এটি বাম বা ডান দিক থেকে স্লাইড হয়ে আসবে।
• opened: সাইডন্যাভ শুরুতে খোলা থাকবে।

২.২. রেসপন্সিভ সাইডন্যাভ (ট্যাবলেট এবং মোবাইলের জন্য)

মোবাইল এবং ট্যাবলেট ডিভাইসে সাইডন্যাভের আচরণ পরিবর্তন করার জন্য, MatSidenav এর mode এবং opened প্রপার্টি কনফিগার করা যায়। আপনি চাইলে angular flex layout বা CSS media queries ব্যবহার করে এটি রেসপন্সিভ করতে পারেন।

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav [mode]="isHandset ? 'over' : 'side'" [opened]="!isHandset">
    <mat-nav-list>
      <a mat-list-item href="#">Home</a>
      <a mat-list-item href="#">About</a>
      <a mat-list-item href="#">Contact</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
    <h1>Welcome to My Website</h1>
  </mat-sidenav-content>
</mat-sidenav-container>

২.৩. TypeScript ফাইলে রেসপন্সিভ চেক করা

এখানে আমরা isHandset ব্যবহার করেছি, যা Breakpoints চেক করে মোবাইল বা ট্যাবলেট ডিভাইসে অ্যাপ্লিকেশনটি রেসপন্সিভ করে।

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isHandset: boolean = false;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe([Breakpoints.Handset])
      .subscribe(result => {
        this.isHandset = result.matches;
      });
  }
}

এখানে:

• BreakpointObserver ব্যবহার করা হয়েছে Handset (মোবাইল) ডিভাইস চেক করতে। যখন মোবাইল ডিভাইসে থাকবে, তখন সাইডন্যাভের মোড over হবে, এবং ডেস্কটপে side হবে।

৩. স্টাইলিং এবং কাস্টমাইজেশন

CSS বা SCSS ব্যবহার করে সাইডন্যাভের আউটলুক কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, সাইডন্যাভের ব্যাকগ্রাউন্ড, সাইডন্যাভের প্রস্থ এবং অন্যান্য উপাদান কাস্টমাইজ করা যেতে পারে।

.example-container {
  height: 100%;
}

mat-sidenav {
  width: 250px;
  background: #3f51b5;
}

mat-sidenav-content {
  padding: 20px;
}

এখানে, সাইডন্যাভের প্রস্থ 250px এবং ব্যাকগ্রাউন্ড কালার #3f51b5 (নীল) দেওয়া হয়েছে।

৪. টগল সাইডন্যাভ (Mobile View)

মোবাইল ভিউতে আপনি সাইডন্যাভের জন্য একটি toggle button তৈরি করতে পারেন যা সাইডন্যাভকে খোলার এবং বন্ধ করার কাজ করবে।

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav [mode]="isHandset ? 'over' : 'side'" [opened]="!isHandset">
    <mat-nav-list>
      <a mat-list-item href="#">Home</a>
      <a mat-list-item href="#">About</a>
      <a mat-list-item href="#">Contact</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    <h1>Welcome to My Website</h1>
  </mat-sidenav-content>
</mat-sidenav-container>

এখানে, mat-icon-button এবং mat-icon ব্যবহার করে সাইডন্যাভের জন্য একটি মেনু আইকন তৈরি করা হয়েছে যা সাইডন্যাভ টগল করবে।

Angular Material এর মাধ্যমে একটি রেসপন্সিভ সাইডন্যাভ তৈরি করা সহজ এবং কার্যকর। Angular Material এর MatSidenav এবং BreakpointObserver ব্যবহার করে আপনি মোবাইল এবং ডেস্কটপ ডিভাইসের জন্য উপযুক্ত সাইডন্যাভ তৈরি করতে পারেন। এটি স্বয়ংক্রিয়ভাবে সাইডন্যাভের আউটলুক কাস্টমাইজ করে এবং ব্যবহারকারীর জন্য আরও সুবিধাজনক নেভিগেশন ব্যবস্থা প্রদান করে।